﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HousingPicDetail.aspx.cs"
    Inherits="ZLDC.Estate.PM.HousingPicDetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>查看图片</title>
    <link href="../css/main.css" rel="stylesheet" type="text/css" />

    <link href="../js/jquery.autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #photoView
        {
            padding: 1px;
            width: 550px;
            height: 400px;
            margin: 10px;
            padding: 0;
            list-style: none;
        }
        #photoView li
        {
            position: absolute;
            z-index: 1001;
            height: 400px;
        }
        #photoView #prev, #photoView #next
        {
            width: 290px;
            background: url(../images/inages/bg.png) repeat;
            filter: alpha(opacity=0);
            moz-opacity: 0.2;
            opacity: 0.2;
            cursor: url(../images/inages/prev.cur), auto;
            left: 10px;
            top: 10px;
            z-index: 1002;
        }
        #photoView #next
        {
            cursor: url(../images/inages/next.cur), auto;
            left: 280px;
            z-index: 1003;
        }
    </style>

    <script src="../js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="../js/LexunJS.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript" charset="utf-8">
    var i = 0;
    var id = 0;
    var record = null;
    var recordLength = 0;
    $(document).ready(function() {
        var id = LexunJS.GetQueryString("id"); // 楼盘ID
        i = LexunJS.GetQueryString("num");

        showHousingPic();
    });

    // 房屋照片
    function showHousingPic() {
        var id = LexunJS.GetQueryString("id");
        $("#content").html("<img src=\"../images/loading.gif\" />正在加载图片,请稍候...."); // 清空列表 
        $.ajax({
            type: 'POST',
            url: '../Handler/HandlerHousing.ashx',
            data: 'act=housingpic_list&eid=' + id,
            timeout: '10000',
            error: function() {
                alert("查询失败！");
            },
            success: function(json) {
                showHousingPicCallBack(json);
            }
        });
    }

    function showHousingPicCallBack(response) {
        photocount = 5;
        var json = eval("(" + response + ")");
        record = json.record;
       
        if (record == null || record.length == 0) {
            $("#content").html("还没有上传图片!");
            return;
        }

        recordLength = record.length;
        i = LexunJS.GetQueryString("num");

        showphoto(); 
    }

    function viewPhoto(type){
        if (type == 'prev' &&  i == 0) {
            alert("这是第一张图片！");
            return;
        }
        if (type == 'prev' && i > 0) i--;
        if (type == 'next' && i < recordLength) i++;
        if (i == recordLength) {
            alert("这是最后一张图片！");
            i--;
            return;
        }

        showphoto();
    }

    function showphoto() {
        $("#content").html("");
        var arr = [];
        arr.push("");
        if (record[i].type == 1) {
            arr.push("<img id='img' title='室内图' style='width:550px;' src='../" + record[i].picurl + "' />");
            arr.push("<br/>" + record[i].remark + "   <br/>上传人:" + record[i].user + "[" + record[i].dept + "]<br/>上传时间:" + record[i].createdate)

        } else if (record[i].type == 2) {

            arr.push("<img id='img' title='户型图' style='width:550px;' src='../" + record[i].picurl + "' />");
            arr.push("<br/>户型图   <br/>上传人:" + record[i].user + "[" + record[i].dept + "]<br/>上传时间:" + record[i].createdate)
        }
        arr.push("");

        $("#content").html(arr.join('')); // 显示列表
    }
    
    </script>

</head>
<body>
    <ul id="photoView">
        <li id="prev" title="查看上一张" onclick="viewPhoto('prev');"></li>
        <li id="next" title="查看下一张" onclick="viewPhoto('next');"></li>
        <li id="content" style="text-align: center">
            <img id="img" src="photo/pic1.jpg" width="400" height="300" /></li>
    </ul>
</body>
</html>
